<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!--
    创建Vue实例,初始化渲染
        1.准备容器
        2.引包
        3.创建实例
        4.添加配置项目===>完成渲染

-->
<div class="box2">
    {{msg}}
</div>
<div class="box">
    {{msg}}
</div>
--------------------------------
<div id="app">
    <!--这里将来会编写一些用于渲染的代码逻辑  -->
    {{msg}}
</div>
<!--引入是开发版本的包，包含完整的注释和警告-->
<script src="./vue.js"></script>

<script>
    //一旦引入VueJS核心包，在全局环境，就有了Vue的构造函数
    const app = new Vue({
        //通过el配置选择器，制定Vue管理的是那个盒子
        el: '#app',
        data:{
            msg:'hello 黑马'
        }
    })


</script>

</body>
</html>
